<template>
  <div class="purchased-serices">
    <div
      v-for="(servItem, index) of serviesList"
      :key="index"
      class="serviec-item"
    >
      <el-card shadow="hover">
        <div class="item-header">
          <svg-icon class="item-icon" :icon-class="servItem.icon" />
          {{ servItem.name }}
        </div>
        <div class="item-footer">
          <div>{{ servItem.desc }}</div>
          <div><el-checkbox :value="servItem.isEnable" /></div>
        </div>
      </el-card>
    </div>
    <i v-for="(_, i) of 5" :key="'flex-i-' + i" />
  </div>
</template>

<script>
// import { mapState } from 'vuex'

const serviesList = [
  {
    icon: 'client',
    name: '经营分析',
    desc: '掌控进销存，数据赋能',
    isEnable: true
  },
  {
    icon: 'client',
    name: '经营分析',
    desc: '掌控进销存，数据赋能',
    isEnable: true
  },
  {
    icon: 'client',
    name: '经营分析',
    desc: '掌控进销存，数据赋能',
    isEnable: true
  },
  {
    icon: 'client',
    name: '经营分析',
    desc: '掌控进销存，数据赋能',
    isEnable: true
  }
]

export default {
  data() {
    return {
      serviesList
    }
  },
  computed: {},
  mounted() {},

  methods: {}
}
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';

$card-item-width: 350px;
.purchased-serices {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .serviec-item {
    width: $card-item-width;
    margin-bottom: 15px;
    >>> .el-card {
      background: $lightBgColor;
    }
    .item-header {
      margin-bottom: 20px;
      .item-icon {
        color: $primaryColor;
        font-size: 30px;
      }
    }

    .item-footer {
      display: flex;
      justify-content: space-between;
    }
  }
  > i {
    width: $card-item-width;
  }
}
</style>
